<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>选座购票</title>
</head>
<script src="${pageContext.request.contextPath}/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/toubu.css"/>
<link href="${pageContext.request.contextPath}/css/style.css" type="text/css" rel="stylesheet" media="all">
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background: #2E323B;
    }

    .seatInfo{
        border: red solid 2px;
        margin: 3px;
    }
    #font td {
        width: 26px;
        height: 25px;
    }

    #font span {
        width: 100%;
        height: 100%;
    }

    .lockTicket {
        width: 100%;
        height: 100%;
        display: block;
    }

    #font .soldTicket {
        width: 100%;
        height: 100%;
        display: block;
        /*background: black;*/
        /*color: white;*/
        /*border-radius: 5px;*/
    }

    .seatMovie .picBox {
        background: #f7f7f7;
        float: left;
        text-align: center;
        margin-right: 10px;
        display: inline;
        width: 85px;
        height: 115px;
        line-height: 115px;
        overflow: hidden;
    }

    dl dt {
        margin-bottom: 10px;
    }
</style>
<style>
    * {
        margin: 0;
        padding: 0;
        text-decoration: none;
        list-style: none;
        border: 0;
    }

    .site-nav {
        z-index: 10000;
        width: 100%;
        background-color: #e4e4e4;
        border-bottom: 1px solid #eee;
        overflow: visible;
        position: fixed;
        left: 0px;
        top: 0px;
    }

    .site-nav div {
        margin: 0 auto;
        width: 1190px;
        height: 35px;
        background-color: #e4e4e4;
        z-index: 10002;
        position: relative;
        padding: 0 6px;
        line-height: 35px;
    }

    .site-nav div a {
        float: left;
        margin-right: 7px;
        font-size: 12px;
        color: #6C6C6C;
    }

    .head-wrap {
        padding-top: 36px;
        background-color: #fff;
        z-index: 100;
        /* border-bottom: 1px #e5e5e5 solid; */
    }

    .center-wrap {
        width: 990px;
        min-width: 990px;
        margin: 0 auto;
    }

    .left-wrap {
        float: left;
        width: 650px;
        padding: 0 20px !important;
        border: 1px solid #e5e5e5;
        overflow: hidden;
    }

    .tab-movie-tit {
        height: 60px;
        width: 100%;
        margin-bottom: 10px;
    }

    .tab-movie-tit a {
        display: block;
        margin-right: 30px;
        float: left;
        color: #999;
        font-size: 16px;
        margin-top: 32px;
        line-height: 26px;
        text-decoration: none;
    }

    .tab-movie-tit a.current {
        color: #3e3e3e;
        border-bottom: 2px #eb002a solid;
    }

    .nav-wrap {
        float: left;
    }
    .nav li:nth-child(2) a{
        border-bottom: 3px #eb002a solid;
        color: #eb002a;
    }
    .nav-wrap .nav {
        float: left;
        padding-top: 18px;
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 40px;
    }

    .nav li {
        float: left;
        color: #6b6b6b;
        line-height: 42px;
        width: 74px;
        height: 44px;
    }

    .nav li a {
        color: #666;
        font-size: 18px;
        float: left;
        padding: 0 14px;
        margin-right: 10px;
    }

    .movie-card-wrap {
        display: block;
        width: 161px;
        height: 273px;
        overflow: hidden;
        position: relative;
        padding-top: 9px;
        padding-right: 9px;
        float: left;
        margin-top: 10px;
        margin-right: 10px;
        margin-left: 19px;
        line-height: 0;
    }

    .movie-card-wrap .movie-card-buy {
        display: block;
        height: 40px;
        width: 224px;
        line-height: 40px;
        padding-left: 58px;
        background: #eb002a;
        color: #fff;
    }

    .movie-card .movie-card-name {
        position: absolute;
        bottom: 0;
        height: 56px;
        width: 100%;
    }

    .movie-card .movie-card-info {
        position: absolute;
        top: 0;
        left: 0;
        width: 160px;
        height: 224px;
        color: #fff;
    }

    .tab-movie-list{
        width: 610px;
    }
    .hover {
        transform: translateZ(0);
        position: relative;
        z-index: 100000;
        display: none;
        /* width: 330px;
        height: 100px; */
        float: left;
        margin-left: 170px;
    }

    .hover a {
        color: #000;
    }
</style>
<body>
<c:import url="head.jsp" charEncoding="UTF-8" />


<div class="container detailed" style="margin-top: 20px;">
    <div style="margin-top: 20px;">
        <div></div>
    </div>
    <div style="margin-left: 60px; margin-top: 20px;">
        <div style="float: left;">
            <table border="0px"><%-- class="col-lg-5"--%>
                <thead>
                <tr align="center">
                    <td width="20px"></td>
                    <td colspan="9">
                        <div style="width: 500px; height:35px; border-top:5px solid black;border-radius: 60% 60% 0 0;">
                            <strong>屏幕</strong>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="height: 10px;"></td>
                </tr>
                </thead>

                <tbody id="font" align="center">

                </tbody>
            </table>
            <div style=" clear: both;"></div>
            <div style=" margin-top: 20px;"><%--id="screenings"--%>
                <span style="margin-left: 150px;">可选:
                    <img src="${pageContext.request.contextPath}/imgs/icon-1.png" style="width:26px;height:25px;"/>
                </span>
                <span style="margin-left: 50px;">已选:
                    <img src="${pageContext.request.contextPath}/imgs/icon-3.png" style="width:26px;height:25px;"/>
                </span>
                <span style="margin-left: 50px;">不可选:
                    <img src="${pageContext.request.contextPath}/imgs/icon-2.png" style="width:26px;height:25px;"/>
                </span>
            </div>
        </div>

        <div style="float: left;margin-left: 20px;"><%--class="seat-right"--%>
            <div class="seatMovie clearfix" style="margin-bottom: 20px;">
                <div class="picBox">
                    <a href="">
                        <img src="${pageContext.request.contextPath}${detailVo.img_path}"
                             style="width: 85px;height: 115px;"></a>
                </div>
                <dl>
                    <dd><h3>${detailVo.fName}</h3></dd>
                    <dd>版本： ${detailVo.lanType} </dd>
                    <dd>片长： ${detailVo.f_length}分钟</dd>
                </dl>
            </div>
            <div class="seatContent">
                <dl>
                    <dt>
                        <label>影厅：</label>
                        <strong>${detailVo.roomName}</strong>
                    </dt>
                    <dt>
                        <label>场次：</label>
                        <em>${detailVo.pTimeStr}</em>
                    </dt>
                    <dt id="zuowei" style=" margin-top: 20px; ">
                        <label>座位:</label>
                        <div id="po" style="margin-left: 30px;overflow:hidden; width: 495px;">
                            <font id="yi"></font>
                        </div>
                    </dt>
                    <dt>
                        <label>原价：</label>
                        <span class="" data-originprice="5800">¥${detailVo.price} x <i id="cnt">0</i></span>
                        <span class=""></span>
                    </dt>
                    <dt class="total">
                        <label>费用:￥
                            <span style="margin-left: 15px; ">
                            <font style="color: red; font-size: 16px;" id="money">0</font>
                        </span>
                            元
                        </label>
                    </dt>
                </dl>
            </div>
            <div class="center">
                <span id="gou" class="btn btn-danger">购票</span>
            </div>

        </div>

    </div>

</div>


</body>

<script type="text/javascript">
    $(function () {
        var size = 0;

        /*动态生成座位信息*/
        var arr =  ${detailVo.seat};/*座位信息*/
        $("#font").empty();
        for (var i = 0; i < arr.length; i++) {
            var $tr = $("<tr></tr>");
            var $tdCount = $("<td>" + (i + 1) + "</td>");
            $tr.append($tdCount);
            for (var j = 1; j < arr[i].length; j++) {
                var $td = $("<td></td>");
                $td.html(' <span id="' + (i + 1) + '-' + j + '" style="display: block;"><img src="${pageContext.request.contextPath}/imgs/icon-1.png" style="width:26px;height:25px;"/><i id="' + (i + 1) + '排' + j + '号" style="display: none;">' + (i + 1) + '排' + j + '号' + '</i></span>');
                $tr.append($td);
                size++;
            }
            $("#font").append($tr);
            var $tr1 = $("<tr></tr>");
            $tr1.html('<td style="height: 10px;"></td>');
            $("#font").append($tr1);
        }

        var money = ${detailVo.price};

        /*统计选中了多少票*/
        var cnt = 0;

        $("#font span").removeClass("soldTicket");
        $().ready(function () {
            $.ajax({
                type: "get",
                url: "sold",
                data: {
                    playId:"${detailVo.pId}"
                },
                dataType: "json",
                success: function (data) {
                    $.each(data, function (index, info) {
                        var len = data.length;
                        for (var a = 0; a < size; a++) {
                            if ($("#font span i").eq(a).text() == info) {
                                $("#font span i").eq(a).parent().addClass("soldTicket");
                                $("#font span i").eq(a).parent().children('img').attr("src", "${pageContext.request.contextPath}/imgs/icon-2.png");
                            }
                        }
                    });
                }
            });
        });


        /*在选座表进行添加座位与已选取消*/
        $("#font").on("click", "span", function () {
            var text = $(this).children().text();
            // 如果是一个被选中的座位  将座位数量-1   订单价格随之变化
            // 如果是一个未被选中的座位  将座位数量+1
            // 如果是一个已售出的座位  将座位数量不变
            if ($(this).hasClass("lockTicket")) {
                var a = $(".seatInfo").size();
                console.log(a);
                for (var i = 0; i < a; i++) {
                    var arr = $(".seatInfo").eq(i).text();
                    if (text == arr) {
                        // console.log($(".seatInfo").eq(i))
                        $(".seatInfo").eq(i).remove();
                        cnt -= 1;
                        $("#cnt").text(cnt);
                        $("#money").text(money * cnt);
                    }
                    $(this).removeClass("lockTicket");
                    $(this).children('img').attr("src", "${pageContext.request.contextPath}/imgs/icon-1.png");
                }
            } else if ($(this).hasClass("soldTicket")) {
                return;
            } else {
                // 先将座位的样式  设置为以锁定的状态
                $(this).addClass("lockTicket");
                $(this).children('img').attr("src", "${pageContext.request.contextPath}/imgs/icon-3.png");
                // 增加选择的座位数量  更新订单价格
                cnt += 1;
                $("#cnt").text(cnt);
                $("#money").text(money * cnt);
                // 在已选的显示框中  显示出已选的座位位置
                var piao = "<span class='seatInfo'>" + text + "</span>";
                $("#yi").after(piao);
            }
        })

        /*在已选处点击取消*/
        $("#po").on("click", "span", function () {
            var a = $(this).text();
            var len = $("#font span i").size();//获取span标签的个数
            for (var index = 0; index < len; index++) {//创建一个数字数组
                var idValue = $("#font span i").eq(index).attr("id");
                if (idValue == a) {
                    $("#font span i").eq(index).parent().removeClass("lockTicket");
                    $("#font span i").eq(index).parent().children('img').attr("src", "${pageContext.request.contextPath}/imgs/icon-1.png");
                    $(this).remove();
                    cnt -= 1;
                    $("#cnt").text(cnt);
                    $("#money").text(money * cnt);
                    break;
                }
            }
        })

        $("#gou").click(function () {
            if (cnt > 0) {
                $.ajax({
                    type: "post",
                    url: "buy",
                    data: {
                        playId:"${detailVo.pId}",
                        cnt: cnt,
                        seatStr: $(".seatInfo").text()
                    },
                    dataType: "json",
                    success: function (data) {
                        // console.log(data);
                        if (data[0] == 1) {
                            // console.log(data);
                            // window.location.href = "http://localhost:8080//pay?orderId="+data[1];
                            location.href = "/pay?orderId=" + data[1];
                        } else {
                            alert("下单失败");
                        }
                        // 应该刷新当前页面
                        // window.location.reload();
                    }
                });
            } else {
                alert("请选择座位");
            }
        })

    })
</script>
</html>
